const path = require("path");
const exec = require("child_process").execSync;
const resolve = dir => {
  return path.join(__dirname, dir);
};

const markdownRender = require("markdown-it")();
process.env.VUE_APP_NAME = "CMS_CLIENT";
process.env.VUE_APP_VERSION = require("./package.json").version;
process.env.VUE_APP_BUILD_TIME = require("dayjs")().format("YYYY-M-D HH:mm:ss");
process.env.VUE_APP_LAST_COMMIT = exec("git rev-parse HEAD").toString().trim();
process.env.VUE_APP_BUILD_TOOL = "VUE_APP_BUILD_TOOL";


module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: true, // 是否开启eslint保存检测
  productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  css: {
    loaderOptions: {
      // 设置 scss 公用变量文件
      sass: {
        prependData: `@import '~@/assets/style/theme/var.scss';`
      },
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",
            viewportWidth: 1920,
            unitPrecision: 3,
            propList: [
              "*"
            ],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@v", resolve("src/views"))
      .set("@c", resolve("src/components"))
      .set("@u", resolve("src/utils"))
      .set("@d", resolve("src/assets/docs"))
      .set("@s", resolve("src/service")) /* 别名配置 */
      .set("api", resolve("src/api"))
      .set("utils", resolve("src/utils"))
    config.module
      .rule("md")
      .test(/\.md$/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("vue-markdown-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .options({
        raw: true,
        use: [
          [
            require("markdown-it-container"),
            "demo",
            {
              validate: function(params) {
                return params.trim().match(/^demo\s*(.*)$/);
              },
              render: function(tokens, idx) {
                if (tokens[idx].nesting === 1) {
                  // 1.获取第一行的内容使用markdown渲染html作为组件的描述
                  let demoInfo = tokens[idx].info.trim().match(/^demo\s+(.*)$/);
                  let description =
                    demoInfo && demoInfo.length > 1 ? demoInfo[1] : "";
                  let descriptionHTML = description
                    ? markdownRender.render(description)
                    : "";
                  // 2.获取代码块内的html和js代码
                  let content = tokens[idx + 1].content;
                  // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
                  return `<demo-block>
                <div class="source" slot="source">${content}</div>
                ${descriptionHTML}
                <div class="highlight" slot="highlight">`;
                } else {
                  return "</div></demo-block>\n";
                }
              }
            }
          ]
        ]
      });
  }
};
